<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ $t('Sales_data') }}</span>
      </div>
      <el-row style="margin-bottom: 20px;">
        <el-select v-model="queryParam.shopId" clearable :placeholder="$t('Please_select_store_')"
         >
          <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>
        </el-select>
        <el-select v-model="queryParam.orderSource" multiple placeholder="请选择订单来源">
          <el-option
            v-for="item in orderSources"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="queryParam.payType" clearable :placeholder="$t('请选择支付方式')" >
          <el-option v-for="item in payTypeList" :value="item.value" :label="item.label" />
        </el-select>
        <el-button
          plain1
          class="filter-item"
          type="info"
          icon="el-icon-search"
          @click="handleDateChange"
        >{{ $t("Search") }}
        </el-button>
      </el-row>
      <el-card>
        <div slot="header" class="clearfix">
          <span>{{ $t('Transaction_data') }}</span>
          <div style="display: inline;float: right;">
            <div style="display: inline;float: right;" class="block">
              <el-date-picker
                v-model="queryParam.dateRange"
                type="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="datePickerShortcuts"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
              </el-date-picker>
            </div>
          </div>
          <!--          <div style="display: inline;float: right;">
            <el-button style="display: inline;" @click="exportSales()">导出数据</el-button>
          </div>-->
        </div>
        <el-row>
          <el-col :span="16">
            <div class="table-layout">
              <el-row>
                <el-col :span="3" class="table-cell-title">{{ $t('Number_of_views') }}</el-col>
                <el-col :span="3" class="table-cell-title">{{queryParam.payType==6? $t('积分兑换人数') : $t('Number_of_people_order') }}</el-col>
                <el-col :span="3" class="table-cell-title">{{queryParam.payType==6? $t('积分兑换订单数') : $t('Number_of_orders') }}</el-col>
                <el-col :span="3" class="table-cell-title">{{queryParam.payType==6? $t('积分兑换件数') : $t('Number_of_items_ordered') }}</el-col>
                <el-col :span="4" class="table-cell-title">{{queryParam.payType==6? $t('积分兑换有效订单数') : $t('Valid_orders') }}</el-col>
                <el-col :span="4" class="table-cell-title">{{queryParam.payType==6? $t('积分兑换') : $t('Order_value') }}</el-col>
                <el-col :span="4" class="table-cell-title">{{queryParam.payType==6? $t('返还积分中人数') : $t('退款中人数') }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="3" class="table-cell">{{ statistics.browseUserNum }}</el-col>
                <el-col :span="3" class="table-cell">{{ statistics.userOrderNum }}</el-col>
                <el-col :span="3" class="table-cell">{{ statistics.orderNum }}</el-col>
                <el-col :span="3" class="table-cell">{{ statistics.orderGoodsNum }}</el-col>
                <el-col :span="4" class="table-cell">{{ statistics.validOrderNum }}</el-col>
                <el-col :span="4" class="table-cell">{{ statistics.orderPrice | floorTwoDecimal }}</el-col>
                <el-col :span="4" class="table-cell">{{ statistics.underRefundUsers }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="3" class="table-cell-title">{{queryParam.payType==6? $t('返还积分') : $t('Refunded_amount') }}</el-col>
                <el-col :span="3" class="table-cell-title">{{queryParam.payType==6? $t('积分兑换完成人数') : $t('Number_of_paying_customers') }}</el-col>
                <el-col :span="3" class="table-cell-title">{{queryParam.payType==6? $t('积分兑换完成订单数') : $t('Orders_paid') }}</el-col>
                <el-col :span="3" class="table-cell-title">{{queryParam.payType==6? $t('积分兑换完成件数') : $t('Items_paid') }}</el-col>
                <el-col :span="4" class="table-cell-title">{{queryParam.payType==6? $t('积分兑换完成') : $t('Items_value') }}</el-col>
                <el-col :span="4" class="table-cell-title">{{queryParam.payType==6? $t('平均兑换积分/人') : $t('Customer_to_tickets_ratio') }}</el-col>
                <el-col :span="4" class="table-cell-title">{{ queryParam.payType==6? $t('返还积分完成人数') : $t('退款完成人数') }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="3" class="table-cell">{{ statistics.refundPrice | floorTwoDecimal }}</el-col>
                <el-col :span="3" class="table-cell">{{ statistics.payUserNum }}</el-col>
                <el-col :span="3" class="table-cell">{{ statistics.payOrderNum }}</el-col>
                <el-col :span="3" class="table-cell">{{ statistics.PayOrderGoodsNum }}</el-col>
                <el-col :span="4" class="table-cell">{{ statistics.payPrice | floorTwoDecimal }}</el-col>
                <el-col :span="4" class="table-cell">{{ statistics.payUserNum ==
                    0 ? 0 : statistics.payPrice / statistics.payUserNum | floorTwoDecimal
                }}</el-col>
                <el-col :span="4" class="table-cell">{{ statistics.completefundUsers}}</el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="8">
            <ve-funnel :data="funnelData"></ve-funnel>
          </el-col>
        </el-row>
      </el-card>
      <el-card>

        <div slot="header" class="clearfix">
          <span>{{ $t('Transaction_data') }}</span>
          <div style="display: inline;float: right;">
            <div style="display: inline;float: right;" class="block">
              <el-date-picker v-model="dateSaleRange" type="datetimerange" :clearable="false"
                :picker-options="datePickerShortcuts" @change="handleSaleDateChange"
                              format="yyyy-MM-dd HH:mm:ss"
                              value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('Select_dates')" />
            </div>
          </div>
          <!--              <div style="display: inline;float: right;">
                <el-button style="display: inline;" @click="exportSales()">导出数据</el-button>
              </div>-->
        </div>
        <ve-histogram :data="chartData" :settings="histogramSettings"></ve-histogram>
        <div align="center">{{ $t('金额') }}({{ $t('单位') }}:$)</div>
      </el-card>

      <!--      <el-card>

        <div slot="header" class="clearfix">
          <span>{{$t('销售对比')}}</span>
          <div style="display: inline;float: right;">
            <el-select v-model="compareType">
              <el-option :value="0" :label="$t('最近一周')"></el-option>
              <el-option :value="1" :label="$t('最近一个月')"></el-option>
            </el-select>
          </div>
        </div>
      </el-card>-->
    </el-card>
  </div>

</template>

<script>
import VeHistogram from 'v-charts/lib/histogram.common'
import VeFunnel from 'v-charts/lib/funnel.common'
import { allForPerm } from '@/api/shop'
import { salesStatistics, transactionData } from '@/api/statistics'
import { formatDate,datePickerShortcuts } from '@/utils/date'

export default {
  name: "salesStatistics",
  components: { VeHistogram, VeFunnel },
  data() {
    const startDate = formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 60), 'yyyy-MM-dd hh:mm')
    const endDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
    return {
      histogramSettings: {
        yAxisName: [this.$t('会员数')],
      },
      queryParam: {
        shopId: undefined,
        payType: 1,
      },
      shops: [],
      orderSources:[{value: 1, label: 'APP'},{value: 2, label: '门店下单'},{value: 4, label: '订阅'}],
      // 支付方式(1:现金支付,2:礼物卡支付,3:Paypal支付,4:余额支付,5:Clover支付,6:积分兑换)
      payTypeList: [
        {
          label: this.$t('现金支付'),
          value: 1
        },
        {
          label: this.$t('礼物卡支付'),
          value: 2
        },
        {
          label: this.$t('Paypal支付'),
          value: 3
        },
        {
          label: this.$t('余额支付'),
          value: 4
        },
        {
          label: this.$t('Clover支付'),
          value: 5
        },
        {
          label: this.$t('积分兑换'),
          value: 6
        }

      ],
      dateRange: [startDate, endDate],
      dateSaleRange: [startDate, endDate],
      activeTable: "1",
      chartData: {
        columns: ['amount', 'sales'],
        rows: [

        ]
      },
      datePickerShortcuts,
      funnelData: undefined,
      statistics: undefined,
      compareType: 0,
    }
  },
  created() {
    this.resetStat()
    if (this.$route.query && this.$route.query.shopId) {
      this.queryParam.shopId = this.$route.query.shopId
    }
    allForPerm().then(response => {
      this.shops = response.data.data.list
    })
    this.getData()
  },
  methods: {
    text(val) {
    },
    resetStat() {
      this.statistics = {
        browseUserNum: 0,
        userOrderNum: 0,
        orderNum: 0,
        orderGoodsNum: 0,
        validOrderNum: 0,
        orderPrice: 0,
        refundPrice: 0,
        payUserNum: 0,
        payOrderNum: 0,
        PayOrderGoodsNum: 0,
        payPrice: 0
      }
      this.funnelData = {
        columns: ['status', 'count'],
        rows: [
          { 'status': this.$t('Number_of_views'), 'count': 0 },
          { 'status': this.$t('Number_of_people_order'), 'count': 0 },
          { 'status': this.$t('Number_of_paying_customers'), 'count': 0 },
        ]
      }
    },
    getData() {
      this.resetStat()
      salesStatistics(this.queryParam).then(response => {
        if (response.data.data) {
          this.statistics = response.data.data
          this.funnelData.rows[0].count = this.statistics.browseUserNum
          this.funnelData.rows[1].count = this.statistics.userOrderNum
          this.funnelData.rows[2].count = this.statistics.payUserNum
        }
      })
      this.getTransactionData()
    },
    getTransactionData() {
      let param1 = {
        shopId: this.queryParam.shopId,
        timeHorizon:this.dateRange,
        payType: this.queryParam.payType,
      }
      this.chartData.rows.splice(0, this.chartData.rows.length)
      transactionData(param1).then(response => {
        if (response.data.data) {
          for (let item in response.data.data) {
            this.chartData.rows.push({
              amount: item,
              sales: response.data.data[item]
            })
          }
        }
      })
    },
    handleDateChange() {
      this.getData()
    },
    handleSaleDateChange() {
      this.getTransactionData()
    },
  }
}
</script>

<style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
